<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>剪裁图像</title>
<style type="text/css">
canvas{
	border:1px solid #000;
}
</style>
<script type="text/javascript">
function Draw(){
	var canvas=document.getElementById("canvas");
	var context = canvas.getContext("2d");
	var newImg = new Image();
	newImg.src= "../images/Chaplin.jpg";
	newImg.onload=function(){
		
		// 设置一个圆形的剪裁区域
		ArcClip(context);
		// 从左上角开始绘制图像
		context.drawImage(newImg,0,0);
		// 设置全局半透明
		context.globalAlpha=0.6;
		// 使用路径绘制的矩形
		FillRect(context);
	}
}
// 设置一个圆形的剪裁区域
function ArcClip(context){
	context.beginPath();
	context.arc(150,150,100,0,Math.PI*2,true);
	context.clip();
}
// 使用路径绘制的矩形
function FillRect(context){
	context.beginPath();
	context.rect(150,150,90,90);
	context.fillStyle="#f90";
	context.fill();
}
window.addEventListener("load",Draw,true);
</script>
</head>
<body style="overflow:hidden">
<canvas id="canvas" width="400" height="300">你的浏览器不支持该功能！</canvas>
</body>
</html>
